vue

2023-07-13 03:21| 来源: 网络整理| 查看: 265

短学期问题总结前端路由问题

在完成此次短学期任务做前端的时候想实现页面之间的跳转，不知道如何实现？最后想到用vue-router组件解决。

首先下载router npm install vue-router 创建路由文件,在src目录下创建一个新的文件夹，例如"router"，然后在该文件夹下创建一个新的文件，例如"index.js"。在该文件中编写你的路由配置,在下面的示例中，我们导入了Vue和Vue Router，并创建了一个路由实例。在routes数组中，我们定义了两个路由，分别对应根路径和"/about"路径，并指定了对应的组件。 // 导入Vue和Vue Router import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/Home.vue'; import About from '../views/About.vue'; // 创建路由实例 const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] }); // 导出路由实例 export default router; 在主应用中使用路由 // 导入Vue和路由实例 import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; // 创建Vue应用实例并绑定路由 const app = createApp(App); app.use(router); app.mount('#app'); 在主组件中引入

最后就可以胜利使用啦。

网络请求问题

因为要与后端进行请求所以要用axios，主要解决封装使用问题

前端带cookie问题：前端带cookie，就是在Axios里面添加一句话myAxios.defaults.withCredentials = true;后端要配合跨域

引入axios npm install axios 创建一个Axios实例：在你的项目中的某个适当的位置，例如src目录下的一个新文件（例如api.js或axios.js），创建一个新的Axios实例。这将帮助你在整个项目中使用统一的配置和拦截器。 // 导入axios库 import axios from 'axios'; // 创建一个新的axios实例 const instance = axios.create({ baseURL: 'https://api.example.com', // 设置基本URL timeout: 5000, // 设置超时时间，单位为毫秒 headers: { 'Content-Type': 'application/json', // 设置请求头 }, }); // 添加请求拦截器 instance.interceptors.request.use( (config) => { // 在发送请求之前做些什么，例如添加认证信息 const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, (error) => { // 对请求错误做些什么 return Promise.reject(error); } ); // 添加响应拦截器 instance.interceptors.response.use( (response) => { // 对响应数据做些什么，例如处理统一的错误码 return response.data; }, (error) => { // 对响应错误做些什么 return Promise.reject(error); } ); // 导出axios实例 export default instance; 发送请求示例 // 导入axios实例 import axios from './api'; // 发送GET请求的示例 axios.get('/api/data') .then(response => { // 处理响应数据 console.log(response); }) .catch(error => { // 处理请求错误 console.error(error); }); // 发送POST请求的示例 axios.post('/api/login', { username: 'user', password: 'pass' }) .then(response => { // 处理响应数据 console.log(response); }) .catch(error => { // 处理请求错误 console.error(error); }); 后端 mybatis框架下自己写SQL如何写在src/main/resource目录下编写XML 目录结构

我们将UserMapper.xml放在resource下的mapper目录中，我的整个项目目录如下

编写实体类对应的Mapper接口

我们这里自定义了getAll()方法，获取全部用户的信息。

package com.xwhking.mapper; import com.xwhking.pojo.User; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import org.springframework.stereotype.Repository; import java.util.List; @Mapper public interface UserMapper extends BaseMapper { public List getAll(); } 编写UserMapper.xml DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> select * from user 在配置文件中扫描我们的xml配置的位置

appilication.yml

mybatis-plus.mapper-locations=classpath:/mapper/**.xml 测试 import org.springframework.boot.test.context.SpringBootTest; import java.io.InputStream; import java.util.ArrayList; import java.util.List; @SpringBootTest class AutoApplicationTests { @Autowired private UserMapper userMapper; @Test void test() { List userList=userMapper.getAll(); System.out.println(userList); } } 在src/main/java 目录下编写XML 目录结构

编写实体类对应的Mapper接口 package com.xwhking.mapper; import com.xwhking.pojo.User; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import org.springframework.stereotype.Repository; import java.util.List; @Repository public interface UserMapper extends BaseMapper { public List getAll(); } 编写UserMapper.xml DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> select * from user 编写配置文件

application.yml

mybatis-plus.mapper-locations=classpath:com/xwhking/mapper/xml/**.xml 配置pom文件

为什么：这是因为在maven默认情况下是不会将src/main/java目录的xml等资源打包进入class文件夹的，而是直接忽略掉。

我们只需在pom中加入如下配置，告诉idea，在编译的时候将src/main/java下的xml一起打包进class文件夹中，这样也就不会报异常了。

src/main/java **/*.xml 测试 import org.springframework.boot.test.context.SpringBootTest; import java.io.InputStream; import java.util.ArrayList; import java.util.List; @SpringBootTest class AutoApplicationTests { @Autowired private UserMapper userMapper; @Test void test() { List userList=userMapper.getAll(); System.out.println(userList); } } classpath和classpath*的区别

classpath:只会在你的class路径下寻找 classpath*:不仅包含class路径，还包括jar文件中(class路径)进行查找

一般来说，在大型公司的项目开发中都会需要用到classpath*进行文件配置，因为通常会用到第三方的jar，所以大多情况下会需要查找这些jar的配置文件。

参数传递问题单个参数传递 //在接口中定义放法，参数形式如下 //使用单个参数 Student selectById(int id); select * from student where id = #{id} //调用方法时只需要传入相应类型的单个值即可 Student student = dao.selectById(2); 使用@param为参数命名传递多个参数 /* 在接口文件的对应方法形参中，使用以下格式进行命名 * 多个参数：为参数命名，在形参前加上 @Param("自定义参数名") * */ List selectMultiParam(@Param("myname") String name, @Param("myage") Integer age); //调用时传入对应的参数值 List students = dao.selectMultiParam("康康",23); select * from student where name=#{myname} or age=#{myage} 使用Java对象作为方法的参数 //在接口中定义放法，参数形式如下 //多个参数：使用java对象作为方法的参数 List selectMultiObject(QueryParam queryParam); select * from student where name=#{queryName} or age=#{queryAge} //调用时传入相应对象 List students = dao.selectMultiObject(queryParam); 使用位置传参

在方法的参数中，形参的顺序对应映射文件中参数的顺序，arg0指形参中第一个值，arg1代表第二个，以此类推。

//在接口中定义放法，参数形式如下 //多个参数：使用位置传参 List selectMultiPosition(String name, Integer age); select * from student where name=#{arg0} or age=#{arg1} //调用代码 List students = dao.selectMultiPosition("康康", 23); 使用map传参 //在接口中定义放法，参数形式如下 //使用Map传递多个参数 List selectMultiMap(Map map); select * from student where name=#{mapName} or age=#{mapAge} //调用 Map data = new HashMap(); data.put("mapName","krain"); data.put("mapAge",23); List students = dao.selectMultiMap(data); 配置knife4j

如果springboot version >= 2.6 需要添加如下配置：

spring: mvc: pathmatch: matching-strategy: ANT_PATH_MATCHER 导入依赖 com.github.xiaoymin knife4j-spring-boot-starter 2.0.7 配置类 package com.xwhking.usercenter.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import springfox.documentation.builders.ApiInfoBuilder; import springfox.documentation.builders.PathSelectors; import springfox.documentation.builders.RequestHandlerSelectors; import springfox.documentation.service.ApiInfo; import springfox.documentation.service.Contact; import springfox.documentation.spi.DocumentationType; import springfox.documentation.spring.web.plugins.Docket; import springfox.documentation.swagger2.annotations.EnableSwagger2WebMvc; /** * 自定义接口文档的配置 */ @Configuration//配置类 @EnableSwagger2WebMvc //swagger注解 public class SwaggerConfig { @Bean(value = "defaultApi2") public Docket defaultApi2() { return new Docket(DocumentationType.SWAGGER_2) .apiInfo(apiInfo()) .select() // 这里一定要标注你控制器的位置 .apis(RequestHandlerSelectors.basePackage("com.xwhking.usercenter.controller")) .paths(PathSelectors.any()) .build(); } /** * api 信息 * @return */ private ApiInfo apiInfo() { return new ApiInfoBuilder() .title("鱼皮用户中心") .description("鱼皮用户中心接口文档") .termsOfServiceUrl("https://github.com/liyupi") .contact(new Contact("yupi","https://github.com/liyupi","[email protected]")) .version("1.0") .build(); } } 访问

自己的项目url/＋doc.html 后面html别忘了，不然会找不到文件

PostgreSQL的双引号问题

在mysql中字段没有大小写之分，在用mybatis用起来非常舒适，配用，但是我们的短学期，学校要求用openGauss写一个应用，而openGauss基于postgreSQL 的数据库，他的字段用双引号括住的话其中的大小写是区分的。这就使我在使用mybatis时对字段的一个对应出了问题

解决：就是用转义字符（\）给字段加上双引号就好。

下面是一个例子

package com.xwhking.ms.domain; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import lombok.Data; import java.io.Serializable; /** * 班级表，也是依赖于专业表，拥有专业表的外键 * @TableName ZouwClass01 */ @TableName(value ="\"ZouwClass01\"") @Data public class ZouwClass01 implements Serializable { /** * */ @TableId(type = IdType.AUTO,value = "\"zwId01\"") private Long zwId01; /** * */ @TableField(value = "\"zwName01\"") private String zwName01; /** * */ @TableField(value = "\"zwMajorId01\"") private Long zwMajorId01; @TableField(exist = false) private static final long serialVersionUID = 1L; @Override public boolean equals(Object that) { if (this == that) { return true; } if (that == null) { return false; } if (getClass() != that.getClass()) { return false; } ZouwClass01 other = (ZouwClass01) that; return (this.getZwId01() == null ? other.getZwId01() == null : this.getZwId01().equals(other.getZwId01())) && (this.getZwName01() == null ? other.getZwName01() == null : this.getZwName01().equals(other.getZwName01())) && (this.getZwMajorId01() == null ? other.getZwMajorId01() == null : this.getZwMajorId01().equals(other.getZwMajorId01())); } @Override public int hashCode() { final int prime = 31; int result = 1; result = prime * result + ((getZwId01() == null) ? 0 : getZwId01().hashCode()); result = prime * result + ((getZwName01() == null) ? 0 : getZwName01().hashCode()); result = prime * result + ((getZwMajorId01() == null) ? 0 : getZwMajorId01().hashCode()); return result; } @Override public String toString() { StringBuilder sb = new StringBuilder(); sb.append(getClass().getSimpleName()); sb.append(" ["); sb.append("Hash = ").append(hashCode()); sb.append(", zwId01=").append(zwId01); sb.append(", zwName01=").append(zwName01); sb.append(", zwMajorId01=").append(zwMajorId01); sb.append(", serialVersionUID=").append(serialVersionUID); sb.append("]"); return sb.toString(); } } 跨域

直接在后端配置

package com.xwhking.ms.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**")//项目中的所有接口都支持跨域 .allowedOriginPatterns("*")//所有地址都可以访问，也可以配置具体地址 .allowCredentials(true) .allowedMethods("*")//"GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS" .maxAge(3600);// 跨域允许时间 } }

短学期问GPT问题汇总前后端调整问题 (openai.com)

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章